<template>
  <div style="padding: 10px;">


    <el-form :inline="true" :model="inbound" class="demo-form-inline">
      <el-form-item label="入库单号:">
        <el-input v-model="inbound.orderId" placeholder="请输入入库单号" />
      </el-form-item>
      <el-form-item label="供货商:">
        <el-input v-model="inbound.userName" placeholder="请输入供货商" />
      </el-form-item>
      <el-form-item label="品牌:">
        <el-input v-model="inbound.brandName" placeholder="请输入品牌" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="getList">搜索</el-button>
        <el-button :icon="Refresh" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-button type="primary" :icon="Plus" @click="add">新增入库单</el-button>



    <div style="padding: 15px;">
      <el-table :data="state.tableData" style="width: 100%" @selection-change="change">
        <el-table-column prop="orderId" label="入库单号" />
        <el-table-column prop="order_date" :formatter="timeFormatter" label="入库日期" />
        <el-table-column prop="username" label="供货商" />
        <el-table-column prop="brandName" label="品牌" />
        <el-table-column prop="specification" label="规格" />
        <el-table-column prop="quantity" label="数量" />
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="permission" label="状态" />
        <el-table-column prop="operate" label="操作" width="200px">
          <template #default="scope">
            <el-button type="success" :icon="EditPen" size="small"
              @click.prevent="update(scope.row, scope.$index)">编辑</el-button>
            <el-button type="danger" :icon="Delete" size="small"
              @click.prevent="remove(scope.row.orderId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

   

  </div>

  <el-dialog v-model="dialogFormVisible" title="添加入库表单" width="30%">
    <el-form :model="state.form" label-width="100px">
      <el-form-item label="入库日期">
        <el-date-picker v-model="state.form.orderDate" type="date" placeholder="请选择日期"  value-format="YYYY-MM-DD"  />
      </el-form-item>

      <el-form-item label="供货商">
        <el-select v-model="state.form.supplierId" placeholder="Select">
            <el-option
              v-for="item in suppliers"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">{{ item.label }}</span>
              <span
                style="
                  float: right;
                  color: var(--el-text-color-secondary);
                  font-size: 13px;
                "
                >{{ item.value }}</span
              >
            </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="品牌">
        <el-select v-model="state.form.brandId" placeholder="Select">
            <el-option
              v-for="item in brands"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">{{ item.label }}</span>
              <span
                style="
                  float: right;
                  color: var(--el-text-color-secondary);
                  font-size: 13px;
                "
                >{{ item.value }}</span
              >
            </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="规格">
        <el-input v-model="state.form.specification" autocomplete="off" />
      </el-form-item>
      <el-form-item label="数量">
        <el-input v-model="state.form.quantity" autocomplete="off" />
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="state.form.price" autocomplete="off" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="state.form.permission"  class="m-2" placeholder="Select">
          <el-option
            v-for="item in permission"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确认</el-button>
      </span>
    </template>
  </el-dialog>



  <el-dialog v-model="updateFormVisible" title="修改入库表单" width="30%">
    <el-form :model="state.form2" label-width="100px">
      <el-form-item label="入库单号" >
        <el-input v-model="state.form2.orderId" disabled autocomplete="off" style="width: 50%"/>
      </el-form-item>
      <el-form-item label="入库日期">
        <el-date-picker v-model="state.form2.orderDate" type="date" placeholder="请选择日期"  value-format="YYYY-MM-DD"  />
      </el-form-item>

      <el-form-item label="供货商">
        <el-select v-model="state.form2.supplierId" placeholder="Select">
            <el-option
              v-for="item in suppliers"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">{{ item.label }}</span>
              <span
                style="
                  float: right;
                  color: var(--el-text-color-secondary);
                  font-size: 13px;
                "
                >{{ item.value }}</span
              >
            </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="品牌">
        <el-select v-model="state.form2.brandId" placeholder="Select">
            <el-option
              v-for="item in brands"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">{{ item.label }}</span>
              <span
                style="
                  float: right;
                  color: var(--el-text-color-secondary);
                  font-size: 13px;
                "
                >{{ item.value }}</span
              >
            </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="规格">
        <el-input v-model="state.form2.specification" autocomplete="off" />
      </el-form-item>
      <el-form-item label="数量">
        <el-input v-model="state.form2.quantity" autocomplete="off" />
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="state.form2.price" autocomplete="off" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="state.form2.permission"  class="m-2" placeholder="Select">
          <el-option
            v-for="item in permission"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="uodateFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saves">确认</el-button>
      </span>
    </template>
  </el-dialog>


  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="inbound.current"
      v-model:page-size="inbound.size"
      :page-sizes="[1,3,5,10]"
      :small="small"
      :disabled="disabled"
      background
      layout="total,sizes, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>

import { reactive, ref,onMounted} from 'vue'
import { Search, Refresh, Plus, Delete, EditPen } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs'
import requests from '../../utils/request'
import getCategory from '@/apis/put'

const dialogFormVisible = ref(false)
const updateFormVisible = ref(false)
const globIndex = ref(-1)
const size=ref()
const total=ref()
const state =reactive({
  tableData :[{}],
  form:{},
  form2:{},
})
const inbound = ref({
  current:1,
  size: 5,
  orderId: '',
  userName: '',
  brandName: ''
})

const timeFormatter = (row, column, value) => {
  return dayjs(value).format('YYYY-MM-DD')
}

const getList= async()=>{
    const res=await getCategory(inbound.value)
    console.log('10086')
    console.log(res)
    console.log(res.data)
    size.value=res.data.size
    total.value=res.data.total
    state.tableData=res.data.records
  }
onMounted(()=>getList())

const search=()=>{
  request.get('/inBound/list').then(res =>{
    state.tableData =res.data
  })
}

const reset = () => {
    inbound.value = {
      current: 1,
      size: 2,
      orderId: '',
      userName: '',
      brandName: ''
    };
  };


const add = () => {
  state.form = {}
  dialogFormVisible.value = true
}

const save = () => {

  requests.post('/inBound/add',state.form).then(res =>{
    if(res.code === '200'){
      ElMessage.success('添加成功')
      getList()
      dialogFormVisible.value = false
    }else{
      ElMessage.error(res.msg)
    }
  })

  
}

const saves = () => {
  console.log(state.form2);
  requests({
    url:  '/inBound/update' ,
    method: 'PUT' ,
    data: state.form2,
    
  }).then(res =>{
    if(res.code === '200'){
      ElMessage.success('修改成功')
      getList()
      updateFormVisible.value = false
    }else{
      ElMessage.error(res.msg)
    }
  })

}

const remove = (orderId) => {
  console.log(orderId);
  requests.delete('/inBound/delete?orderId=' +orderId).then(res =>{
    if(res.code === '200'){
      ElMessage.success('删除成功')
      getList()
    }else{
      ElMessage.error(res.msg)
    }
  })
}

const update = (row, index) => {
  const newObj = Object.assign({}, row)
  state.form2 = reactive(newObj)
  globIndex.value = index
  updateFormVisible.value = true
}

const handleSizeChange = (val) => {
  inbound.value.size=val
  console.log(val);
  getList()
}
const handleCurrentChange = (val) => {
  inbound.value.current=val
  getList()
}

const change = () => {

}

const brands = [
  {
    value: 1,
    label: '茅台',
  },
  {
    value: 2,
    label: '邵阳老酒',
  },
  {
    value: 3,
    label: '泸州老窖',
  },
  {
    value: 4,
    label: '北京二锅头',
  },
  
]

const suppliers = [
  {
    value: 1,
    label: '张三',
  },
  {
    value: 2,
    label: '李四',
  },
  {
    value: 3,
    label: '王五',
  },
  {
    value: 4,
    label: '刘六',
  },
  
]

const permission = [
    {
        value: '请求中',
        label: '申请'

    },
    {
        value: '申请已驳回',
        label: '驳回',
        disabled: true,
    },
    {
        value: '审核通过',
        label: '通过',
        disabled: true,
    },
]


</script>

